<template>
	<view class="content">
		<v-tabs v-model="current" :tabs="tabs" field="name" @change="changeTab" paddingItem="22rpx" fontSize="24rpx"
			activeColor="#000000" lineColor="#000000"></v-tabs>
		<view class="menuBox" ref="menuBox">
			<view class="menuItem ellipsis" :class="menuIndex==index?'menuActive':''" v-for="(item,index) in menu"
				:key="index" @click="changeMenu(index)">
				{{item.name}}
			</view>
		</view>
		<scroll-view class="infoBox" :style="{ height: infoBoxHeight }" enable-flex="true" scroll-y="true"
			@scrolltolower="getMore()">
			<view class="infoItem" v-for="(item,index) in data" :key="index" @click="toInfo(item.id)">
				<image :src="item.cover" class="infoPoster"></image>
				<text class="infoName ellipsis">{{item.name}}</text>
				<text class="infoPrice">￥{{item.price}}</text>
				<view class="infoAdd">+</view>
			</view>
		</scroll-view>
		<cc-myTabbar :tabBarShow="1"></cc-myTabbar>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				current: 0,
				menu: [],
				menuIndex: 0,
				tabs: [],
				data: '',
				pid: 0, //主菜单
				cid: '', //子菜单
				page: 1,
				isLogon: false,
				hasMore: true, // 默认有更多数据
				infoBoxHeight: '0px', // 初始高度
			}
		},
		onShow() {
			uni.hideTabBar();
			// this.getData();
		},
		mounted() {
			this.calculateInfoBoxHeight();
		},
		onLoad() {
			uni.hideHomeButton();
			uni.hideTabBar();
			if (this.token) {
				this.getParent();
			} else {
				this.$store.watch(
					(state) => state.token,
					(newToken) => {
						if (newToken) {
							this.getParent();
						}
					}
				);
			}
		},
		methods: {
			calculateInfoBoxHeight() {
				// 获取 menuBox 的高度
				const query = uni.createSelectorQuery().in(this);
				query.select('.menuBox').boundingClientRect(data => {
					if (data) {
						const menuBoxHeight = data.height;
						// 计算 infoBox 的高度
						const vTabsHeight = 105; // v-tabs 高度
						const menuBoxMarginTop = 45; // menuBox 的 margin-top
						const infoBoxMarginTop = 30; // infoBox 的 margin-top
						const tabBarHeight = 250; // cc-myTabbar 的高度

						const totalHeight =
							`calc(100vh - ${vTabsHeight + menuBoxHeight + menuBoxMarginTop + infoBoxMarginTop + tabBarHeight}rpx)`;
						this.infoBoxHeight = totalHeight;
					}
				}).exec();
			},
			toInfo(id) { //根据不同的类型跳转不同的页面
				switch (this.current) {
					case 0: //工程入户
						this.$navto.navto("/pages/service_wash/service_wash", {
							id: id,
							cat_id: this.tabs[this.current].id
						})
						// this.$navto.navto("/pages/service_electrical/service_electrical", {
						// 	id: id,
						// 	cat_id: this.current + 1
						// })
						break;
					case 1: //保洁服务
						// this.$navto.navto("/pages/service_airplane/service_airplane", {
						// 	id: id,
						// 	cat_id: this.current + 1
						// })
						this.$navto.navto("/pages/service_cleaning/service_cleaning", {
							id: id,
							cat_id: this.tabs[this.current].id
						})
						break;
					case 2: //接送机服务
						// this.$navto.navto("/pages/service_car/service_car", {
						// 	id: id,
						// 	cat_id: this.current + 1
						// })
						this.$navto.navto("/pages/service_airplane/service_airplane", {
							id: id,
							cat_id: this.tabs[this.current].id
						})
						break;
					case 3: //洗护服务
						// this.$navto.navto("/pages/service_electrical/service_electrical", {
						// 	id: id,
						// 	cat_id: this.current + 1
						// })
						this.$navto.navto("/pages/service_cleaning/service_cleaning", {
							id: id,
							cat_id: this.tabs[this.current].id
						})
						break;
					case 4: //搬家拉货
						this.$navto.navto("/pages/service_goods/service_goods", {
							id: id,
							cat_id: this.tabs[this.current].id
						})
						break;
					case 6: //保洁服务
						this.$navto.navto("/pages/service_cleaning/service_cleaning", {
							id: id,
							cat_id: this.tabs[this.current].id
						})
						break;
						// case 6: //保姆月嫂
						// 	this.$navto.navto("/pages/service_nanny/service_nanny", {
						// 		id: id,
						// 		cat_id: this.current + 1
						// 	})
						// 	break;
						// case 7: //订餐服务
						// 	this.$navto.navto("/pages/service_food/service_food", {
						// 		id: id,
						// 		cat_id: this.current + 1
						// 	})
						// 	break;
					default:
						this.$navto.navto("/pages/service_wash/service_wash", {
							id: id,
							cat_id: this.current + 1
						})
						break;
				}
			},
			getMore() {
				if (!this.hasMore) return; // 如果没有更多数据，直接返回
				this.page++;
				this.$request.get(`service_list?cid=${this.menu[this.menuIndex].id}&page=${this.page}`)
					.then(res => { //查询子菜单数据
						if (res.data.data && res.data.data.length > 0) {
							this.data.push(...res.data.data);
						} else {
							this.hasMore = false; // 没有更多数据了
							this.$toast('没有更多数据了');
						}
					})
			},
			getParent() {
				this.$request.get(`service_cat_list?pid=${this.pid}`).then(res => { //查询主菜单
					this.tabs = res.data.data;
					this.$request.get(`service_cat_list?pid=${this.tabs[0].id}`).then(res => { //查询子菜单
						this.menu = res.data.data;
						if (this.menu.length > 0) {
							this.$request.get(`service_list?cid=${this.menu[this.menuIndex].id}`).then(
								res => { //查询子菜单数据
									this.data = res.data.data;
								})
						}
					})
				})
			},
			changeMenu(index) {
				this.hasMore = true;
				this.menuIndex = index;
				this.page = 1;
				this.$request.get(`service_cat_list?pid=${this.menu[index].id}`).then(res => {
					this.$request.get(`service_list?cid=${this.menu[this.menuIndex].id}`).then(res => {
						this.data = res.data.data;
						this.$nextTick(() => {
							this.calculateInfoBoxHeight(); // 重新计算高度
						});
					});
				});
			},
			changeTab(index) {
				this.hasMore = true;
				this.data = [];
				this.menuIndex = 0;
				this.page = 1;
				this.$request.get(`service_cat_list?pid=${this.tabs[this.current].id}`).then(res => {
					this.menu = res.data.data;
					if (this.menu.length > 0) {
						this.$request.get(`service_list?cid=${this.menu[this.menuIndex].id}`).then(res => {
							this.data = res.data.data;
							this.$nextTick(() => {
								this.calculateInfoBoxHeight(); // 重新计算高度
							});
						});
					}
				});
			},
			// 获取用户数据
			getData() {
				this.$request.get('center').then(res => {
					console.log(res)
					if (res.data.data.phone > 0) {
						this.isLogon = true;
					}
				});
			},
		},
		computed: {
			...mapState(['token']),
		}
	}
</script>

<style lang="scss">
	.infoBox {
		margin-top: 30rpx;
		width: 670rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-left: 40rpx;
		// height: 68vh;
		// height: calc(100vh - 105rpx - 60rpx - 75rpx);
		overflow-y: auto;
		/* 允许滚动 */

		.infoItem {
			position: relative;
			width: 323rpx;
			height: 500rpx;
			background-color: #ffffff;
			margin-bottom: 40rpx;

			.infoPoster {
				width: 323rpx;
				height: 350rpx;
			}

			.infoName {
				width: 80%;
				margin-top: 25rpx;
				margin-left: 30rpx;
				font-weight: 700;
				font-size: 26rpx;
				color: #121212;
				display: inline-block;
			}

			.infoPrice {
				display: inline-block;
				margin-top: 10rpx;
				margin-left: 30rpx;
			}

			.infoAdd {
				position: absolute;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 34rpx;
				font-size: 20rpx;
				height: 34rpx;
				right: 30rpx;
				bottom: 30rpx;
				background-color: #000000;
				color: #ffffff;
				border-radius: 50%;
			}
		}
	}

	.menuBox {
		width: 670rpx; // 确保宽度足够
		margin-left: 40rpx;
		margin-top: 45rpx;
		display: flex;
		flex-wrap: wrap; // 允许换行
		justify-content: flex-start; // 左对齐
		gap: 20rpx; // 设置间距
	}

	.menuItem {
		width: calc((100% - 60rpx) / 4); // 动态计算宽度，确保每行 4 个
		height: 60rpx;
		// display: flex;
		// align-items: center;
		// justify-content: center;
		// white-space: nowrap; // 禁止换行
		// overflow: hidden; // 隐藏溢出内容
		// text-overflow: ellipsis; // 超出时显示省略号
		font-weight: 700;
		font-size: 22rpx;
		color: #121212;
		background: #f0f0f0;
		letter-spacing: 4rpx;
		box-sizing: border-box; // 确保 padding 不会影响宽度计算
		margin-bottom: 20rpx; // 设置底部间距
		padding-left: 10rpx;
		padding-right: 10rpx;
		text-align: center;
		line-height: 60rpx;
	}

	.menuActive {
		background-color: #000000;
		color: #ffffff;
	}

	.v-tabs__container {
		background-color: #fafafa !important;
		height: 105rpx !important;
		border-bottom: 1rpx solid #cccccc !important;
		position: relative !important;
	}

	.v-tabs__container-line {
		// height: 4rpx !important;
		// bottom: 0 !important;
		// width: 80rpx !important;
		// transform: translateX(-40rpx) !important;
		// transition: all 0.3s ease-in-out !important;
		display: none !important;
	}

	.v-tabs__container-item {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		position: relative !important;
		height: 100% !important;
		// padding: 0 20rpx !important;
		margin-left: 40rpx !important;
		padding: 0 !important;
	}

	.active {
		font-size: 30rpx !important;
		font-weight: 700 !important;
		border-bottom: 10rpx solid #000000 !important;
	}

	.content {
		position: fixed;
		overflow-y: hidden;
		width: 100%;
		height: calc(100vh - 150rpx);
		background-color: #fafafa;
		// padding-bottom: 200rpx;
	}
</style>